<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!--jQuery and Bootstrap  -->
<link href="../../../css/bootstrap.min.css" rel="stylesheet">
<script src="../../../vendor/jquery/dist/jquery.min.js"></script>
<script src="../../../vendor/bootstrap/dist/js/bootstrap.min.js"></script>

</head>
<body>
	<div class="container-fluid" style="margin-top: 10px;">
		 <div id="tabdata"></div>
	</div>
</body>
<script>

function buildHtml(udata) {

	var html = "<table id=\"udatatable\" class=\"table table-bordered\" >";
	html = html
			+ "<thead style=\"background-color:#696969\"> <th>名称</th> <th>IP</th><th>用户</th>  <th>类型</th><th>状态</th> <th>备注</th> <th>账户操作</th><th>节点操作</th>  </thead>  <tbody>";

	for (var i = 0; i < udata.length; i++) {
		var userdata = udata[i].users;
		var userlength = udata[i].users.length;
		if (userlength > 0) {
			for (var j = 0; j < userdata.length; j++) {
				html = html + "<tr>";
				if (j == 0) {
					html = html
							+ "<td style=\"font-weight:bold;width:255px!important;vertical-align: middle; \" rowspan=\""
							+ userlength + "\"   >" + udata[i].name
							+ "</td>";
					html = html
							+ "<td style=\"width:50px!important;vertical-align: middle;\" rowspan=\""
							+ userlength + "\">" + udata[i].ip + "</td>";
				}
				html = html
						+ "<td style=\"width:60px!important; vertical-align: middle;\">"
						+ userdata[j].attr_value + "</td>";

				var typestr = "未知";
				if (userdata[j].type == "admin") {
					html = html
							+ "<td  style=\"width:100px!important; vertical-align: middle;\" >管理员</td>";
				} else if (userdata[j].type == "app") {
					html = html
							+ "<td  style=\"width:100px!important ; vertical-align: middle;\" >应用账户</td>";
				} else if (userdata[j].type == "db") {
					html = html
							+ "<td  style=\"width:100px!important ; vertical-align: middle;\" >数据库账户</td>";
				} else if (userdata[j].type == "yw") {
					html = html
							+ "<td  style=\"width:100px!important; vertical-align: middle;\" >运维人员</td>";
				} else if (userdata[j].type == "inter") {
					html = html
							+ "<td  style=\"width:100px!important; vertical-align: middle;\" >内置账户</td>";
				} else {
					html = html
							+ "<td  style=\"width:100px!important; vertical-align: middle;\" >未知</td>";
				}
				var statusstr = "未知";
				if (userdata[j].status == "enable") {
					html = html
							+ "<td  style=\"width:80px!important ; vertical-align: middle;color:green;font-weight:bold\" >启用</td>";
				} else if (userdata[j].status == "disable") {
					html = html
							+ "<td  style=\"width:80px!important; vertical-align: middle;color:red;font-weight:bold\" >停用</td>";
				} else {
					html = html
							+ "<td  style=\"width:80px!important; vertical-align: middle;color:red;font-weight:bold\" >未知</td>";
				}

				html = html
						+ "<td style=\"vertical-align: middle;\">"
						+ (userdata[j].mark == undefined   ? 
								 "":userdata[j].mark) + "</td>";

				html = html
						+ "<td style=\"font-weight:bold;width:90px!important;vertical-align: middle; \"> <div class=\"btn-group\">    <button ng-click=\"saveitem('"
						+ userdata[j].id
						+ "','"
						+ udata[i].class_id
						+ "','"
						+ udata[i].id
						+ "')\" class=\"btn-white btn btn-xs\">更新</button><button ng-click=\"delitem('"
						+ userdata[j].id
						+ "')\" class=\"btn-white btn btn-xs\">删除</button> </div></td>";
				if (j == 0) {

					html = html
							+ "<td  rowspan=\""
							+ userlength
							+ "\"  style=\"width:170px!important; vertical-align: middle;\" > <div class=\"btn-group\"><button ng-click=\"saveitem(null,'"
							+ udata[i].class_id
							+ "','"
							+ udata[i].id
							+ "')\" class=\"btn-white btn btn-xs\">新增(账户)</button>  <button ng-click=\"addNode('"
							+ udata[i].id
							+ "')\" class=\"btn-white btn btn-xs\">更新</button> <button ng-click=\"delNode('"
							+ udata[i].id
							+ "')\" class=\"btn-white btn btn-xs\">删除</button>   </div></td>";

				}
				html = html + "</tr>";
			}

		} else {
			html = html + "<tr>";
			html = html
					+ "<td style=\"font-weight:bold;width:165px!important\"> "
					+ udata[i].name + " </td>";
			html = html + "<td style=\"width:50px!important\">"
					+ udata[i].ip + "</td>";
			html = html + "<td></td>";
			html = html + "<td></td>";
			html = html + "<td></td>";
			html = html + "<td></td>";
			html = html + "<td></td>";
			html = html
					+ "<td style=\"width:170px!important; vertical-align: middle;\" > <div class=\"btn-group\"> <button ng-click=\"saveitem(null,'"
					+ udata[i].class_id
					+ "','"
					+ udata[i].id
					+ "')\" class=\"btn-white btn btn-xs\">新增(账户)</button> <button ng-click=\"addNode('"
					+ udata[i].id
					+ "')\" class=\"btn-white btn btn-xs\">更新</button> <button ng-click=\"delNode('"
					+ udata[i].id
					+ "')\" class=\"btn-white btn btn-xs\">删除</button>   </div></td>";
			html = html + "</tr>";

		}
	}
	html = html + "</tbody></table>";
	return html;
}
var project = "/dt";

if (localStorage) { 
	var html=localStorage.getItem("cmdbuserlistdata");
	
	console.log(html);
	if(html==null){
		var ps={};
		ps.classCode="xtlist";
		ps.attrCode="userlist";
		//如果是新页面打开则加载所有数据
		$.ajax({
			type : "POST",
			url : project + "/api/base/queryResAllUsers.do",
			data :ps,
			dataType : 'json',
			success : function(res) {
				 if(res.success){
					html = buildHtml(res.data);
					console.log(html);
					$("#tabdata").html(html);
					$("#udatatable tr :last-child").remove();
				 	$("#udatatable tr :nth-child(7)").remove(); 
					
				 }else{
					 alert("取数失败!");
				 }
			}
		});
	}else{
		$("#tabdata").html(html);
		$("#udatatable tr :last-child").remove();
	 	$("#udatatable tr :nth-child(7)").remove(); 
	}
 
	
}else{
	alert("不支持localStorage,无数据显示")
}

 </script>

</html>